<template>
  <div class="openposition">
    <div style="padding: 0.05rem 0.3rem;box-sizing: border-box;border-radius: 5px;">
      <div class="mine_top">
        <div style="width: 40%;">
          账户资金
          <br />
          <span style="color: #FFFF00;font-size: 16px;">{{ param.money_zong }}</span>
        </div>
        <div>
          账户类型:
          <br />
          美元
        </div>
        <div style="width: 40%;text-align: right;">
          可用:
          <br />
          {{ param.money_ke }}
        </div>
      </div>
    </div>

    <div class="mine_list">
      <div v-for="(item, index) in order_list_mine" :key="index" class="chicang_content">
        <div class="chicang_list">
          <div class="list_name">
            <span>合约名称</span>
            <span>{{ item.symbol_cn }}</span>
          </div>
          <div class="list_text">
            <div>
              <span>合约代码：</span>
              <span>{{ item.symbol }}</span>
            </div>
            <div>
              <span>买卖：</span>
              <span>{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</span>
            </div>
          </div>
          <div class="list_text">
            <div>
              <span>单号：</span>
              <span>{{ item.order_number }}</span>
            </div>
            <div>
              <span>浮动盈亏：</span>
              <span>
                <!-- parseFloat(item.symbol_detail['unit_price'] || 0) * -->
                {{
                  Number((ticket[item.symbol] && ticket[item.symbol].price) || 0) == 0
                    ? '- -'
                    : item.rise_fall == 'RISE'
                    ? (
                        (parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0) - parseFloat(item.open_price || 0)) *
                        parseFloat(item.symbol_detail['unit_price'] && item.symbol_detail['unit_price']  || 0) *
                        parseFloat(item.volume || 0)
                      ).toFixed(2)
                    : (
                        (parseFloat(item.open_price || 0) - parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0)) *
                        parseFloat(item.symbol_detail['unit_price'] && item.symbol_detail['unit_price']  || 0) *
                        parseFloat(item.volume || 0)
                      ).toFixed(2)
                }}
              </span>
            </div>
          </div>
          <div class="list_text">
            <div>
              <span>止盈价：</span>
              <span>{{ Number(item.stop_profit_price) || '0.00' }}</span>
            </div>
            <div>
              <span>止损价：</span>
              <span>{{ Number(item.stop_loss_price) || '0.00' }}</span>
            </div>
          </div>
          <div class="list_text">
            <div>
              <span>开仓价：</span>
              <span>{{ Number(item.open_price) || '0.00' }}</span>
            </div>
            <div>
              <span>最新价：</span>
              <span>{{ Number((ticket[item.symbol] && ticket[item.symbol]['price']) || 0) || '- -' }}</span>
            </div>
          </div>
          <div class="list_text">
            <div>
              <span>手续费：</span>
              <span>{{ Number(item.service_fee) || '0.00' }}</span>
            </div>
            <div>
              <span>状态：</span>
              <span>{{ item.state || '- -' }}</span>
            </div>
          </div>
          <div class="list_text">
            <div>
              <span>成交手数：</span>
              <span>{{ item.volume }}</span>
            </div>
            <div class="text_last">
              <span>创建时间：</span>
              <span>{{ item.created_at }}</span>
            </div>
          </div>
        </div>
        <div class="chicang_btn">
          <span @click="btnlist && ordernum(item)">止盈止损</span>
          <span @click="btnlist && openping(item)">快速平仓</span>
          <!-- <span @click="btnlist && clockorder(item)">快速锁仓</span> -->
          <!-- <span @click="btnlist && backorder(item), (holdid = item.id)">快速反手</span> -->
        </div>
      </div>
    </div>
    <div class="selectmark" v-if="alertborder" @click="alertborder = false">
      <div class="selectborder">
        <div class="select_info">
          <div v-for="(item, index) in list" :key="index" @click="select_product(item)" style="display: flex;justify-content: space-around;" class="select_name">
            {{ item.name_code }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*,, 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  data() {
    return {
      alertborder:false,
      btnlist: true /* 控制按钮功能 */,
      order_list_mine: [], //持仓
      profit_price: 0 /* 止盈价格 */,
      loss_price: 0 /* 止损价格 */,
      param: {
        //@todo 用户资金状态
      },
      chicangtime: null /* 控制时间 */
    };
  },

  beforeDestroy() {
    clearInterval(this.chicangtime);
    this.chicangtime = null;
  },
  mounted() {
    this.loadtime();
  },
  methods: {
    loadtime() {
      this.getusermouny(); /* 获取用户资金状态*/
      this.get_order_list_mine(); // 持仓
      this.chicangtime = setInterval(() => {
        this.getusermouny(); /* 获取用户资金状态 */
        this.get_order_list_mine(); // 持仓
      }, 1500);
    },
    /* 获取用户资金状态*/
    getusermouny() {
      this.$get('addons/tf-futures/member/my-info').then(res => {
        // console.log(res,'资金状态');
        if (res.code == 200) {
          this.param = res.data;
        } else {
          console.log(res.message || '获取用户资金状态出错 ');
        }
      });
    },

    // 持仓
    get_order_list_mine() {
      this.$get('addons/tf-futures/order/list?state=hold').then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.order_list_mine = res.data;
        } else {
          console.log(res.message || '获取持仓列表失败');
        }
      });
    },
    // 快捷反手
    backorder(item) {
      this.btnlist = false;
      var tickpri = this.ticket[this.select.code] && this.ticket[this.select.code].price;
      var that = this;
      var bool = false; //加个锁
      this.$layer.open({
        content: '确定反手, 是否继续?',
        btn: [this.$t('confirm'), this.$t('cancel')],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          if (!bool) {
            bool = true; //加个锁

            that.$post('addons/tf-futures/order/bank-hand', { orderid: item.id, price: tickpri }).then(res => {
              that.btnlist = true;
              that.$layer.closeAll();
              if (res.code == 200) {
                that.$layer.msg(res.message || '反手成功');
              } else {
                that.$layer.msg(res.message || '反手失败');
              }
            });
          }
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
    },
    //快速锁仓
    clockorder(item) {
      this.btnlist = false;
      var tickpri = this.ticket[this.select.code] && this.ticket[this.select.code].price;
      var that = this;
      var bool = false;
      this.$layer.open({
        content: '确定锁仓, 是否继续?',
        btn: [this.$t('confirm'), this.$t('cancel')],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          if (!bool) {
            bool = true;

            that.$post('addons/tf-futures/order/lockcabin', { orderid: item.id, price: tickpri }).then(res => {
              that.btnlist = true;
              that.$layer.closeAll();
              bool = false;
              if (res.code == 200) {
                that.$layer.msg(res.message || '锁仓成功');
              } else {
                that.$layer.msg(res.message || '锁仓失败');
              }
            });
          }
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
    },
    // 止盈止损设置
    ordernum(item) {
      var that = this;
      that.btnlist = false;
      var bool = false;
      that.$layer.open({
        content: "<div id='inputbtn'></div>",
        title: '请输入止盈、止损值',
        btn: [this.$t('confirm'), this.$t('cancel')],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          that.stop_profit_price = $('#stop_profit_price').val();
          that.stop_loss_point = $('#stop_loss_point').val();

          if (that.stop_profit_price == '' || that.stop_profit_price == 0 || that.stop_profit_price == undefined) {
            that.stop_profit_price = null;
          }
          if (that.stop_loss_point == '' || that.stop_loss_point == 0 || that.stop_loss_point == undefined) {
            that.stop_loss_point = null;
          }
          if (!bool) {
            bool = true;

            that
              .$post('addons/tf-futures/order/up-with-price', { stop_profit_price: that.stop_profit_price, stop_loss_price: that.stop_loss_point, orderid: item.id })
              .then(res => {
                that.btnlist = true;
                that.$layer.closeAll();
                bool = false;
                if (res.code == 200) {
                  that.$layer.msg(res.message || '设置成功');
                } else {
                  that.$layer.msg(res.message || '设置失败');
                }
              });
          }
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
      var appendHtml = $('#inputbtn').html(
        '<div>止盈:<input type="number" id="stop_profit_price" placeholder="请输入止盈" style="padding: 5px;"/></div>' +
          '<div>止损:<input type="number" id="stop_loss_point" placeholder="请输入止损" style="padding: 5px;"/></div>'
      );
      // this.$compile(appendHtml.get(0));
    },
    // 一键全平
    allopenping() {
      this.btnlist = false;
      if (this.order_list_mine == [] || this.order_list_mine == null || this.order_list_mine == '') {
        this.btnlist = true;
        this.$layer.msg('暂无持仓记录无法全部平仓！');
        return;
      }
      var that = this;
      var bool = false; //加个锁
      this.$layer.open({
        content: '确定全部平仓, 是否继续?',
        btn: [this.$t('confirm'), this.$t('cancel')],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          if (!bool) {
            bool = true; //加个锁
            that.$post('addons/tf-futures/order/close-all').then(res => {
              that.btnlist = true;
              that.order_list_mine = [];
              that.$layer.closeAll();
              if (res.code == 200) {
                that.$layer.msg(res.message || '全部平仓成功');
              } else {
                return this.$layer.msg(res.message || '全部平仓失败');
              }
            });
          }
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
    },
    openping(item) {
      this.btnlist = false;
      this.holdid = item.id;
      //快速平仓
      if (!this.holdid) {
        this.btnlist = true;
        this.$layer.msg('请选中一笔进行操作！');
        return;
      }
      var that = this;
      var bool = false; //加个锁
      this.$layer.open({
        content: '确定平仓, 是否继续?',
        btn: [this.$t('confirm'), this.$t('cancel')],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          if (!bool) {
            bool = true; //加个锁

            that.$post('addons/tf-futures/order/close-order', { orderid: that.holdid }).then(res => {
              that.btnlist = true;
              bool = false; //加个锁
              that.$layer.closeAll();
              if (res.code == 200) {
                that.$layer.msg(res.message || '开仓成功');
              } else {
                that.$layer.msg(res.message || '开仓失败');
              }
            });
          }
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
    }
  }
};
</script>

<style scoped>
/* 弹出框 */
.selectmark {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.lefta {
  margin-left: 15px;
}
.selectborder {
  padding: 15px;
  position: fixed;
  top: 16vh;
  left: 23px;
  width: 50%;
  height: 40vh;
  border-radius: 5px;
  background: rgba(29, 29, 29, 0.9);
  font-size: 30px;
}

.select_title {
  width: 100%;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
}

.select_info {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.select_name {
  width: 100%;
  height: 8vh;
  font-weight: 600;
  box-sizing: border-box;
  padding: 0 10px;
  color: #ffffff;
}
.select_btn {
  width: 100%;
  height: 8vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.close_btn {
  width: 120px;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  text-align: center;
  background: #007f00;
  color: #fff;
}

.active {
  color: #ec5100;
}

.active1 {
  background: #e96302 !important;
}

.up {
  color: #00ff00;
}

.down {
  color: red;
}

.header_right img {
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 0.1rem;
}

.mine_top {
  width: 100%;
  height: 2rem;
  background: #313131;
  font-size: 0.35rem;
  letter-spacing: 2px;
  box-sizing: border-box;
  padding: 0px 10px;
  line-height: 1rem;
  color: #ccc;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.top2_left_top {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.35rem;
  color: #ccc;
  letter-spacing: 2px;
  box-sizing: border-box;
  border: 1px solid #333;
  margin-top: 0.1rem;
}

.top2_left_top input,
.top2_left_bottom input {
  border: none;
  background: #313131;
  height: 80%;
  width: 60%;
  outline: none;
  color: #ccc;
  text-align: right;
}

.top2_left_bottom {
  width: 50%;
  border: 2px solid #333;
  padding: 0.1rem;
  border-radius: 3px;
  color: #ccc;
  margin: 0.1rem;
  border: 0.026667rem solid #333;
  padding: 0.2rem 0.1rem;
  border-radius: 0.04rem;
  color: #ccc;
  margin: 0.1rem;
  margin-top: 0.5rem;
}

.top_left {
  width: 100%;
  height: 3.5rem;
  display: flex;
  background: #313131;
}

.top_left_bottom {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top_right {
  width: 40%;
  height: 3.5rem;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
}

.top_right_list {
  width: 100%;
  height: 1.1rem;
  line-height: 1.1rem;
  color: #ccc;
  font-size: 0.325rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.15rem;
  box-sizing: border-box;
}

.top_right_list span {
  display: block;
}
.top_last {
  width: 100%;
  height: 1.8rem;
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.top_last_box {
  width: 30%;
  height: 100%;
  background: green;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #ccc;
  font-size: 0.45rem;
  letter-spacing: 1px;
  padding: 0.15rem 0;
  box-sizing: border-box;
}

.list_box {
  width: 100%;
  height: 1rem;
  background: #272727;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.2rem;
  color: #ccc;
  letter-spacing: 3px;
  font-size: 0.4rem;
}
.mine_list {
  width: 100vw;
  height: calc(66vh - 2.8rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.chicang_content {
  width: 100%;
  height: auto;
}

.chicang_list {
  width: 100%;
  height: 4.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  margin-top: 0.2rem;
  border-top: 0.013333rem solid #e96302;
}

.chicang_content .list_name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.375rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  color: #e96302;
}

.chicang_content .list_text {
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  color: #ccc;
}

.chicang_content .text_last {
  color: #909090;
  margin-top: 0.2rem;
}

.chicang_content .nolist {
  font-size: 0.45rem;
  letter-spacing: 2px;
  color: #666;
  text-align: center;
  margin-top: 3rem;
}
.chicang_btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 1.2rem;
  color: #333;
  letter-spacing: 2px;
  font-size: 0.35rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  border-bottom: 0.013333rem solid #e96302;
}

.chicang_btn span {
  display: block;
  width: 20%;
  /* height: 0.8rem;
  line-height: 0.8rem; */
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #c5a158;
  background: #9d9d9d;
}
</style>
